import React, { Component, PureComponent } from 'react'

// PureComponent(纯组件)功能和Component一样.但是纯组件又额外的帮我们实现了shouldComponentUpdate,并判断了所有的props和state数据,所以如果使用纯组件,就不需要我们自己定义shouldComponentUpdate了
// 注意: 如果使用了纯组件,则不能再使用shouldComponentUpdate了
export default class Test extends PureComponent {
  state = {
    msg: 'hello',
    obj: { name: 'zs' },
  }
  // 注意: 只在更新阶段执行
  //   shouldComponentUpdate(nextProps, nextState) {
  //     // 注意 :在其他的生命周期钩子中,如果有形参也几乎都是旧的props和旧的state数据,新数据通过this.state和this.props获取.但是当前hook,刚好相反, 新的props和新的state数据是通过形参接收的.旧的 props和旧 的state是通过this.props和this.state接收的
  //     // 获取旧数据: this.state 或 this.props
  //     // 获取新数据:nextState 或 nextProps
  //     // return true
  //     // console.log(nextProps, this.props)
  //     return (
  //       nextProps.c !== this.props.c ||
  //       nextState.msg !== this.state.msg ||
  //       nextState.obj.name != this.state.obj.name
  //     )
  //   }
  render() {
    console.log('test的render执行了')
    return (
      <div>
        Test组件,{this.props.c}, {this.state.msg}, {this.state.obj.name}
        <button
          onClick={() => {
            this.setState({
              msg: '还有3分钟下课',
            })
          }}
        >
          test-按钮
        </button>
        <button
          onClick={() => {
            const newObj = { ...this.state.obj }
            newObj.name = 'ls'
            this.setState({
              obj: newObj,
            })
          }}
        >
          test-按钮-修改obj
        </button>
      </div>
    )
  }
}
